/*
  学习目标：React创建元素练习
*/

import React from 'react';
import ReactDOM from 'react-dom';

// 1 创建div
const divNode = React.createElement(
  'div',
  { id: 'box', classname: 'demo' },
  'helloReact'
);

// 2. 创建ul
// const liNode1 = React.createElement('li', null, '香蕉');
// const liNode2 = React.createElement('li', null, '苹果');
// const liNode3 = React.createElement('li', null, '橘子');

const ulNode = React.createElement(
  'ul',
  { className: 'list' },
  // 💥 createElement不会解析html字符串
  // 💥class 需要改写为className
  React.createElement('li', null, '香蕉'),
  React.createElement('li', null, '苹果'),
  React.createElement('li', null, '橘子')
);

// 💥 ReactDOM.render 只能调用一次
ReactDOM.render(ulNode, document.getElementById('root'));
